<template>
	<view class="check-address" v-if="shopAddressName">
		<view class="left-block">
			<image :src="addressIcon" class="address-icon"></image>
			<span>{{shopAddressName}}</span>
		</view>
		<view class="right-block" @tap="click">
			切换<view class="check-img center">
				<image :src="sanjiaoIcon" class="auto-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			shopAddressName: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				addressIcon: require('@/static/index/address.png'),
				sanjiaoIcon: require('@/static/public/sanjiao.png'),
			}
		},
		methods: {
			click() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-address {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		width: 702rpx;

		.left-block {
			flex: auto;
			display: flex;
			align-items: center;

			.address-icon {
				width: 28rpx;
				height: 34rpx;
			}

			span {
				margin-left: 12rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(20, 20, 20, 1);
			}
		}

		.right-block {
			display: flex;
			align-items: center;
			flex: none;
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(20, 20, 20, 1);

			.check-img {
				margin-left: 9rpx;
				width: 19rpx;
				height: 12rpx;
			}
		}
	}
</style>
